<div class="breadcrumbs breadcrumbs-fixed ace-save-state">
    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-users home-icon"></i>
            <a href="#">反馈管理</a>
        </li>
        <li class="active">反馈列表</li>
    </ul>
</div>

<div class="page-content">
    <div class="row">
        <div class="col-xs-12">
            <h4 class="header smaller lighter blue">反馈列表</h4>
            <div class="row">
                <div class="col-sm-3">
                </div>
                <div class="col-sm-9">
                    <form id="searchForm" class="form-inline text-right" role="search">
                        <div class="input-group col-xs-3">
                            <span class="input-group-addon"><i class="fa fa-calendar bigger-110"></i></span>
                            <input class="form-control" type="text" name="dateRangePicker"
                                   id="dateRangePicker">
                        </div>
                        &nbsp;&nbsp;&nbsp;
                        <div class="input-group">
                            <input id="nameOrMobile" name="nameOrMobile" class="form-control input-sm" type="text"
                                   placeholder="用户名或手机号码"/>
                            <span class="input-group-btn">
                                <button id="searchBtn" class="btn btn-xs btn-info" type="button">
                                    <i class="ace-icon fa fa-search"></i> 搜索
                                </button>
					        </span>
                        </div>
                    </form>
                </div>
            </div>
            <div class="space-6"></div>
            <div class="dataTables_wrapper form-inline no-footer">
                <table id="company-table" class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th class="center">
                            <label class="pos-rel">
                                <input type="checkbox" class="ace">
                                <span class="lbl"></span>
                            </label>
                        </th>
                        <th>用户名</th>
                        <th>反馈内容</th>
                        <th>手机号码</th>
                        <th>添加时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div id="manager-modal" class="bootbox modal fade in" tabindex="-1" role="dialog" aria-hidden="false">
        <div class="modal-dialog" style="width: 50%">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" data-dismiss="modal" class="bootbox-close-button close close-button">×
                    </button>
                </div>
                <div class="modal-body">
                    <form id="manager-form" class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="name"> 用户名称：</label>
                            <div class="col-sm-9">
                                <div class="clearfix">
                                    <input type="text" name="id" id="id" class="hidden">
                                    <input type="text" id="name" name="name" class="col-xs-9" disabled="disabled">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="content"> 反馈内容：</label>
                            <div class="col-sm-9">
                                <div class="clearfix">
                                    <input type="text" id="content" name="content" class="col-xs-9" disabled="disabled">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="phone">手机号码：</label>
                            <div class="col-sm-9">
                                <div class="clearfix">
                                    <input type="text" id="phone" name="phone" class="col-xs-9" disabled="disabled">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="createTime"> 创建时间：</label>
                            <div class="col-sm-9">
                                <div class="clearfix">
                                    <input type="text" id="createTime" name="createTime" class="col-xs-9" disabled="disabled">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-sm btn-default close-button"><i
                            class="fa fa-undo"></i> 关闭
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var company_table;


        $(function () {
            company_table = $('#company-table').DataTable({
                language: {url: 'ace/json/dataTable_CN.json'},
                autoWidth: false,
                ordering: false,
                searching: false,
                serverSide: true,
                processing: true,
                deferRender: true,
                responsive: true,
                ajax: {
                    url: 'management/feedbackList'
                },
                columns: [
                    {
                        data: function (row) {
                            return '<div class="center"><label class="pos-rel"><input type="checkbox" name="bathBox" data-id="' + row.id + '" class="ace"><span class="lbl"></span></label></div>';
                        }
                    },
                    {
                        data: 'name',
                        defaultContent: ''
                    },
                    {
                        data: 'content',
                        defaultContent: ''
                    },
                    {
                        data: 'phone',
                        defaultContent: ''
                    },
                    {
                        data: 'createTime',
                        defaultContent: ''
                    },
                    {
                        data: function (row) {
                            var check = '&nbsp;&nbsp;<a id="editArticle" href="javascript:;" data-row="' + row + '" class="btn btn-xs btn-primary"><i class="fa fa-pencil"></i>详情</a>';
                            var del = '&nbsp;&nbsp;<a id="delArticle" href="javascript:;" data-id="' + row.id + '" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i> 删除</a>';
                            return check + del;
                        }
                    }
                ]
            });



            $('#searchBtn').click(function () {
                var param = $("#searchForm").serialize();
                company_table.ajax.url("management/feedbackList?" + param).load();
            });

            $('#company-table').find('> thead > tr > th input[type=checkbox]').eq(0).on('click', function () {
                $('#company-table').find('tbody > tr').find('input:checkbox').prop("checked", this.checked);
            });

            //点击编辑按钮，填充数据
            $("#company-table tbody").on("click", "#editArticle", function () {
                var row = company_table.row($(this).parents("tr")).data();
                $("#manager-form #name").val(row.name);
                $("#manager-form #content").val(row.content);
                $("#manager-form #phone").val(row.phone);
                $("#manager-form #createTime").val(row.createTime);
                $("#manager-modal").modal("show");
            });



            //点击删除按钮，删除文章
            $("#company-table tbody").on("click", "#delArticle", function () {
                var id = $(this).data("id");
                bootbox.confirm("确定要删除这个反馈信息？", function (f) {
                    if (f) {
                        $.post("management/deleteFeedback/" + id, function () {
                            company_table.ajax.reload();
                        });
                    }
                });
            });


            $('input[name=dateRangePicker]').daterangepicker({
                'applyClass': 'btn-sm btn-success',
                'cancelClass': 'btn-sm btn-default',
                locale: {
                    applyLabel: '确认',
                    cancelLabel: '取消',
                    format: 'YYYY-MM-DD'
                }
            }).prev().on(ace.click_event, function () {
                $(this).next().focus();
            });

        });
    </script>
</div>